<template>
  <el-card>
    <el-row :gutter="10">
        <el-col :span="24"> <el-form  ref="queryForm" :inline="true"  label-width="68px">
          <el-form-item label="日期">
            <el-time-picker
              :picker-options="{
                selectableRange: '18:30:00 - 20:30:00'
                }"
              placeholder="搜索日期">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="时间段">
            <el-time-picker is-range format="HH:mm:ss" value-format="HH:mm:ss"
                            :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至"
                            clearable>
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            v-hasPermi="['system:user:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            v-hasPermi="['system:user:remove']"
          >删除</el-button>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 8px;">
      <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              label="日期"
              prop="bookDate"
              width="120"
             >
            </el-table-column>
            <el-table-column
              label="时间段"
              prop="timeSlot"
              width="120"
              >
            </el-table-column>
            <el-table-column
              label="预约起始时间"
              prop="bookStartTime"
              width="180"
            ></el-table-column>
            <el-table-column
              label="预约人数上限"
              prop="numLimit"
              width="150"
              >
            </el-table-column>
            <el-table-column
              label="已预约人数"
              prop="hasBookedNum"
              width="150"
              >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="info"
                >更多</el-button>
                <el-button
                  size="mini"
                  type="warning"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                >删除</el-button>
                <el-button
                  @click="open = true"
                  size="mini"
                  type="primary">
                  查看已预约详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
          />
        </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
       <el-table
            :data="DetailtableData"
            stripe
            border
            style="width: 100%">
            <el-table-column label="已预约情况">
              <el-table-column
                label="儿童姓名"
                prop="doctorName"
                width="80"
              ></el-table-column>
              <el-table-column
                label="儿童月龄"
                prop="MonthAge"
                width="80"
              ></el-table-column>
              <el-table-column
                label="手机号"
                prop="parentPhone"
                width="110"
              ></el-table-column>
              <el-table-column
                label="发起预约的时间"
                prop="bookStartTime"
                width="150"
              ></el-table-column>
              <el-table-column
                label="想预约的日期"
                prop="bookDate"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="想预约的时间段"
                prop="timeSlot"
                width="120"
              >
              </el-table-column>
              <el-table-column
                label="预约人数上限"
                prop="numLimit"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="已预约人数"
                prop="hasBookedNum"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="预约状态"
                prop="status"
                width="80"
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="warning"
                  >取消预约</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                  >发送消息</el-button>
                </template>
              </el-table-column>
            </el-table-column>
       </el-table>
       <pagination/>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary">确 定</el-button>
         <el-button>取 消</el-button>
       </div>
    </el-dialog>
  </el-card>

</template>

<script>
    export default {
      name: "doctorTimeList",
      data() {
        return {
          tableData: [{
            bookDate: '2021-08-30',
            timeSlot: '08:30-09:30',
            numLimit: 3,
            hasBookedNum: 1,
            status: '0',
            bookStartTime: '2021-08-25 08:36:06',
          },
          {
            bookDate: '2021-08-31',
            timeSlot: '07:30-08:30',
            numLimit: 2,
            hasBookedNum: 1,
            status: '1',
            bookStartTime: '2021-08-25 08:36:06',
          }
          ],
           DetailtableData: [{
          bookDate: '2021-08-30',
          timeSlot: '08:30-09:30',
          bookStartTime: '2021-08-25 08:36:06',
          numLimit: 3,
          doctorName: "吴钟富",
          MonthAge: 72,
          parentPhone: '13173817032',
          hasBookedNum: 2,
          status: '预约成功'
        },
          {
            bookDate: '2021-08-30',
            timeSlot: '08:30-09:30',
            bookStartTime: '2021-08-26 09:36:00',
            numLimit: 3,
            doctorName: "傅无间",
            MonthAge: 73,
            parentPhone: '18889822140',
            hasBookedNum: 2,
            status: '预约成功'
          }
        ],
        open: false,
          total: 100,
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
          },
        }
      }
    }
</script>

<style scoped>

</style>
